<template>
  <el-drawer
    title="新增API"
    :visible.sync="showDrawer"
    :before-close="close"
    size="50%"
  >
  <el-form :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :model="ruleForm">
  <el-form-item label="端口名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="详情描述" prop="description">
    <el-input v-model="ruleForm.description"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
  </el-form>
  </el-drawer>
</template>

<script>
export default {
  name: 'AddForm',
  data: () => {
    return {
      showDrawer: false,
      ruleForm: {
          name: '',
          description: '',
      },
      rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
      }
    }
  },
  methods: {
    show () {
      this.showDrawer = true
    },
    close () {
      this.showDrawer = false
    },
    submitForm(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            const fromData = {
              name: this.ruleForm.name,
              description: this.ruleForm.description,
              star: 123,
              id:Date.now()      //生成当前时间作为id
            }
            this.$emit('fromSubmit',fromData)
              //关闭抽屉
            this.close()  
            //重置表单        
            this.resetForm(ruleForm)

            console.log(this.ruleForm);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //重置表单   
      resetForm(ruleForm) {
        this.$refs[ruleForm].resetFields();
      }
  }
}
</script>

<style>
</style>
